import { ModalForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-components';

export type EditFormProps = {
  title: string;
  open: boolean;
  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
  onFinish: (values: API.ApiItem) => Promise<void>;
  values?: Partial<API.ApiItem>;
};

const EditForm: React.FC<EditFormProps> = (props) => {
  return (
    <ModalForm
      title={props.title}
      open={props.open}
      onOpenChange={props.onOpenChange}
      onFinish={props.onFinish}
      initialValues={props.values}
      modalProps={{ destroyOnClose: true }}
    >
      <ProFormDigit name="id" hidden />
      <ProFormText
        label="API路径"
        name="path"
        rules={[{ required: true, message: '请填写API路径' }]}
      />
      <ProFormText
        label="说明"
        name="description"
        rules={[{ required: true, message: '请填写API说明' }]}
      />
      <ProFormText
        label="分组"
        name="apigroup"
        rules={[{ required: true, message: '请填写API分组' }]}
      />
      <ProFormSelect
        label="请求方法"
        name="method"
        rules={[{ required: true, message: '请选择API方法' }]}
        request={async () => [
          { label: '', value: undefined },
          { label: 'GET', value: 'GET' },
          { label: 'POST', value: 'POST' },
          { label: 'PUT', value: 'PUT' },
          { label: 'DELETE', value: 'DELETE' },
        ]}
      />
    </ModalForm>
  );
};

export default EditForm;
